<template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]"
    width="300px"
    collapsedWidth="0"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <a-card
      title="我的标绘"
      style="position: relative; overflow: hidden; height: 100%"
      :bodyStyle="{ padding: ' 10px 16px' }"
    >
      <a-form-model>
        <a-form-model-item>
          <a-row :gutter="8">
            <a-col :span="8">
              <a-select placeholder="类别">
                <a-select-option value="point"> <a-icon type="ellipsis" /> 点 </a-select-option>
                <a-select-option value="line"> <a-icon type="line" /> 线 </a-select-option>
                <a-select-option value="polygon"> <a-icon type="border" /> 面 </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="16">
              <a-input-search />
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item>
          <a-row :gutter="8">
            <a-col :span="12">
              <a-button type="primary" block @click="handleNew"> <a-icon type="plus" /> 新增标绘图层 </a-button>
            </a-col>
            <a-col :span="12">
              <a-button type="primary" block @click="handleImport"> <a-icon type="plus" /> 数据文件上图 </a-button>
            </a-col>
          </a-row>
        </a-form-model-item>
      </a-form-model>
      <a-list item-layout="vertical" :data-source="data">
        <a-list-item
          slot="renderItem"
          slot-scope="item, index"
          @mouseenter="highlightItem(index)"
          @mouseleave="clearHighlight"
        >
          <!-- eslint-disable-next-line-->
          <template v-for="{ type, text } in actions" slot="actions" v-if="idx == index">
            <span :key="type">
              <a-icon :type="type" />
            </span>
          </template>
          <a-list-item-meta>
            <a slot="title">{{ item }}</a>
            <a-avatar slot="avatar" size="small" icon="environment" />
          </a-list-item-meta>
          <a slot="extra" style="color: inherit"><a-icon type="eye-invisible" /></a>
        </a-list-item>
      </a-list>
      <j-import-modal ref="importModal"></j-import-modal>
      <new-modal ref="newModal"></new-modal>
    </a-card>
  </a-layout-sider>
</template>

<script>
import JImportModal from '@/views/components/JImportModal.vue'
import NewModal from '@/views/components/NewModal.vue'
import { mixin, mixinDevice } from '@/utils/mixin'
const data = ['重点管控点', '木兰社区（测试）', '秀屿区耕地网格及田长测试数据', '西天尾镇产业园']
export default {
  name: 'SideMenu',
  components: { JImportModal, NewModal },
  mixins: [mixin, mixinDevice],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menus: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      data,
      actions: [
        { type: 'download', text: '156' },
        { type: 'tags', text: '156' },
        { type: 'edit', text: '156' },
        { type: 'delete', text: '2' }
      ],
      idx: null
    }
  },
  methods: {
    handleNew() {
      this.$refs.newModal.show()
    },
    handleImport() {
      this.$refs.importModal.show()
    },
    highlightItem(index) {
      this.idx = index
    },
    clearHighlight() {
      this.idx = null
    },
    onSelect(obj) {
      this.$emit('menuSelect', obj)
    }
  }
}
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 5px !important;
}
/deep/.ant-list-vertical .ant-list-item-extra {
  margin-left: 20px !important;
}
/deep/.ant-list-vertical .ant-list-item-action {
  margin-top: 6px !important;
}
.ant-list-vertical .ant-list-item-meta,
.ant-list-vertical .ant-list-item-meta-title {
  margin-bottom: 5px !important;
}
</style>
